<template>
  <div class="wrapper">
    <dx-header-bar :title="serviceId"></dx-header-bar>
    <md-scroll-view ref="scrollView" :scrolling-x="false">
      <div class="box" v-for="(item, index) in nodes" :key="index">
        <img class="icon" :src="'./static/img/topo/'+item.type+'.png'">
        <p class="name" v-if="item.text !== 'null'">{{item.text}}</p>
        <div class="line" v-if="index < nodes.length - 1"
             :style="{height : index === 2 ? '80px' : '30px'}">
          <!--<div class="desc" v-if="lineType === 'MPLS专线'">-->
          <!--<div v-if="index===3"></div>-->
          <!--</div>-->
          <div class="desc" v-if="index === 2">{{links[2].text}}</div>
        </div>
      </div>
    </md-scroll-view>
  </div>
</template>

<script type="text/ecmascript-6">
import { ScrollView } from 'mand-mobile';
import { DxHeaderBar } from '@/components';
import { getBusinessTopo } from '@/api/resource';

export default {
  components: {
    [ScrollView.name]: ScrollView,
    DxHeaderBar
  },
  data() {
    return {
      serviceId: this.$route.query.serviceId,
      lineType: '',
      nodes: [],
      links: []
    };
  },
  created() {
    getBusinessTopo(this.serviceId).then(result => {
      this.nodes = result.nodes;
      this.links = result.links;
      this.lineType = result.linetype;
      this.$refs.scrollView.reflowScroller();
    }).catch(error => {
      console.log(error);
    });
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .container
    height : 100%
    overflow-y : auto

  .box
    text-align : center
    &:first-of-type
      padding-top : 30px
    &:last-of-type
      padding-bottom : 30px
    .icon
      height : 100px
    .name
      padding : 0 20px
      font-size : 26px

  .line
    position : relative
    height : 100px
    &:after
      content : ''
      position : absolute
      top : 0
      left : 50%
      margin-left : -1px
      width : 2px
      height : 100%
      background : #74dfff
    .desc
      position : absolute
      top : 50%
      transform : translateY(-50%)
      padding : 0 20px
      text-align : center
      width : 100%
      font-size : 26px
      z-index : 10

</style>
